<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--结算页</title>

    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-getOrderInfo.css"/>
</head>

<body>
<!--head-->
<div id="orderInfoApp">
    <div class="top">
        <shortcut/>
    </div>

    <div class="cart py-container">

        <!--logoArea-->
        <div class="logoArea">
            <div class="fl logo"><span class="title">结算页</span></div>
        </div>

        <!--主内容-->
        <div class="checkout py-container">
            <div class="checkout-tit">
                <h4 class="tit-txt">填写并核对订单信息</h4>
            </div>
            <div class="checkout-steps">
                <!--收件人信息-->
                <div class="step-tit">
                    <h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false" class="newadd">新增收货地址</a></span>
                    </h5>
                </div>
                <div class="step-cont">
                    <div class="addressInfo">
                        <ul class="addr-detail">
                            <li class="addr-item" v-for="(a,i) in defAddresses" :key="i">
                                <div>
                                    <div :class="{con:true,name:true,selected: i === selectedAddress}"><a
                                            href="javascript:" @click.stop="selectedAddress=i;order.addressId = a.uaid">{{a.consignee}}<span
                                            title="点击取消选择"></span>&nbsp;</a></div>
                                    <div class="con address">{{a.province + a.city + a.area + a.detailaddress}} <span>{{a.telephone}}</span>
                                        <span class="base" v-if="a.defaultOrNot == 1">默认地址</span>
                                        <span class="edittext"><a data-toggle="modal" data-target=".edit"
                                                                  data-keyboard="false">编辑</a>&nbsp;&nbsp;<a
                                                href="javascript:;">删除</a></span>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>

                            </li>
                        </ul>
                        <!--添加地址-->
                        <div tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">
                                            ×
                                        </button>
                                        <h4 id="myModalLabel" class="modal-title">添加收货地址</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form action="" class="sui-form form-horizontal">
                                            <div class="control-group">
                                                <label class="control-label">收货人：</label>
                                                <div class="controls">
                                                    <input type="text" class="input-medium">
                                                </div>
                                            </div>

                                            <div class="control-group">
                                                <label class="control-label">详细地址：</label>
                                                <div class="controls">
                                                    <input type="text" class="input-large">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">联系电话：</label>
                                                <div class="controls">
                                                    <input type="text" class="input-medium">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">邮箱：</label>
                                                <div class="controls">
                                                    <input type="text" class="input-medium">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">地址别名：</label>
                                                <div class="controls">
                                                    <input type="text" class="input-medium">
                                                </div>
                                                <div class="othername">
                                                    建议填写常用地址：<a href="#" class="sui-btn btn-default">家里</a>　<a href="#"
                                                                                                               class="sui-btn btn-default">父母家</a>　<a
                                                        href="#" class="sui-btn btn-default">公司</a>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" data-ok="modal" class="sui-btn btn-primary btn-large">确定
                                        </button>
                                        <button type="button" data-dismiss="modal"
                                                class="sui-btn btn-default btn-large">取消
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--确认地址-->
                    </div>
                    <div class="hr"></div>

                </div>
                <div class="hr"></div>
                <!--支付和送货-->
                <div class="payshipInfo">
                    <div class="step-tit">
                        <h5>支付方式</h5>
                    </div>
                    <div class="step-cont">
                        <ul class="payType">
                            <li :class="{selected: order.paymentType===1}" @click="order.paymentType=1">微信付款<span title="点击取消选择"></span></li>
                            <li :class="{selected: order.paymentType===2}" @click="order.paymentType=2">货到付款<span title="点击取消选择"></span></li>
                        </ul>
                    </div>
                    <div class="hr"></div>
                    <div class="step-tit">
                        <h5>送货清单</h5>
                    </div>
                    <div class="step-cont">
                        <ul class="send-detail">
                            <li>
                                <div class="sendGoods">
                                    <ul class="yui3-g" v-for="(cart,i) in carts" :key="i">
                                        <li class="yui3-u-1-6">
                                            <span><img width="70px" height="70px" :src="cart.image"/></span>
                                        </li>
                                        <li class="yui3-u-7-12">
                                            <div class="desc">{{cart.title}}</div>
                                            <div class="seven">7天无理由退货</div>
                                        </li>
                                        <li class="yui3-u-1-12">
                                            <div class="price">￥{{ly.formatPrice(cart.price)}}</div>
                                        </li>
                                        <li class="yui3-u-1-12">
                                            <div class="num">X{{cart.num}}</div>
                                        </li>
                                        <li class="yui3-u-1-12">
                                            <div class="exit">有货</div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="hr"></div>
                </div>
                <div class="linkInfo">
                    <div class="step-tit">
                        <h5>发票信息</h5>
                    </div>
                    <div class="step-cont">
                        <span>普通发票（电子）</span>
                        <span>个人</span>
                        <span>明细</span>
                    </div>
                </div>
                <div class="cardInfo">
                    <div class="step-tit">
                        <h5>使用优惠/抵用</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-summary">
            <div class="static fr">
                <div class="list">
                    <span><i class="number">{{totalCount}}</i>件商品，总商品金额</span>
                    <em class="allprice">¥{{ly.formatPrice(totalPay)}}</em>
                </div>
                <div class="list">
                    <span>返现：</span>
                    <em class="money">0.00</em>
                </div>
                <div class="list">
                    <span>运费：</span>
                    <em class="transport">0.00</em>
                </div>
            </div>
        </div>
        <div class="clearfix trade">
            <div class="fc-price">应付金额:　<span class="price">¥{{ly.formatPrice(actualPay)}}</span></div>
            <div class="fc-receiverInfo">
                寄送至:{{defAddresses[selectedAddress].province + defAddresses[selectedAddress].city + defAddresses[selectedAddress].area + defAddresses[selectedAddress].detailaddress}}
                收货人：{{defAddresses[selectedAddress].consignee}} {{defAddresses[selectedAddress].telephone}}
            </div>
        </div>
        <div class="submit">
            <a class="sui-btn btn-danger btn-xlarge" href="pay.html" @click.prevent="submit">提交订单</a>
        </div>
    </div>

</div>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
    var orderInfoVm = new Vue({
        el: "#orderInfoApp",
        data: {
            ly,
            addresses: [// 可选地址列表,假数据，需要从后台查询
                {
                    uaid:13,
                    userId:32,
                    consignee: "色克死",// 收件人姓名
                    telephone: "13600000000",// 电话
                    province: "北京",// 省份
                    city: "北京",// 城市
                    area: "朝阳区",// 区
                    detailaddress: "航头 黑马",// 街道地址
                    postcode: "100000", // 邮编
                    defaultOrNot: true
                },
                {
                    uaid:14,
                    userId:32,
                    consignee: "带带大师兄",// 收件人姓名
                    telephone: "14634856474",// 电话
                    province: "四川",// 省份
                    city: "成都",// 城市
                    area: "新津",// 区
                    detailaddress: "万宝路 6324号",// 街道地址
                    postcode: "100000", // 邮编
                    defaultOrNot: false
                }
            ],
            selectedAddress: 0,
            carts: [],
            order: {//订单
                postFee:0, //邮费
                paymentType: 1, // 付款类型
                buyerMessage: null, // 买家留言
                orderDetails: [
                    /* {
                         skuId: 3893493,// 商品sku
                         num: 1 // 商品购买数量
                     }*/
                ],
                addressId: 0,// 收获地址的id，结合用户id查询
                invoiceType: 0,// 发票类型
                sourceType:2 // 订单来源
            }

        },
        created(){
            ly.http.get("auth/verify").then(resp=> {
                //获取当前用户的地址信息
                ly.http.get("/user/queryAddresses?userId="+resp.data.id).then(resp => {
                    this.addresses = resp.data;
                });
            });

        },
        components: {
            shortcut: () => import("/js/pages/shortcut.js")
        },
        mounted() {
            this.carts = ly.store.get("heiheihei") || [];
        },
        computed: {
            totalPay() {// 总金额
                return this.carts.map(c => c.num * c.price).reduce((p1, p2) => p1 + p2, 0);
            },
            actualPay(){// 实际付款
                return this.totalPay + this.order.postFee;
            },
            defAddresses(){ //把默认地址插入到第一个
                let def = this.addresses.find(a => a.defaultOrNot == 1);
                this.order.addressId = def.uaid;
                this.addresses = this.addresses.filter(a => a.defaultOrNot != 1);
                this.addresses.splice(0, 0, def);
                return this.addresses;
            },
            totalCount(){
                return this.carts.map(c => c.num).reduce((p1, p2) => p1 + p2, 0);
            }
        },
        methods:{
            submit(){

                //处理订单详情数据
                this.carts.forEach(c => {
                    let obj = {
                        num:c.num,
                        skuId:c.skuId
                    };
                    this.order.orderDetails.push(obj);
                });


                ly.http.post("order/order",this.order,{
                    transformResponse:[
                        function (data) {
                            return data;
                        }
                    ]
                })
                    .then(resp=>{
                        ly.store.del("heiheihei");
                        window.location.href="http://www.leyou.com/pay.html?orderId="+resp.data;
                    }).catch(resp=>{
                    this.order.orderDetails = [];
                    alert("提交订单失败");
                })
            }
        }
    });
</script>

<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/pages/getOrderInfo.js"></script>
</body>

</html>